<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-27 23:35
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <vue-draggable
    v-model="xDesignTable.tableBtns"
    :options="draggableOptions"
    tag="div"
    :style="{'justify-content':btnJustify}"
    class="x-render-drag-btn-container"
    @end="tableBtnMoveEndHandler"
  >
    <template v-for="(item,index) in xDesignTable.tableBtns">
      <div :key="item.id" class="x-render-table-btn-group">
        <a-button
          v-if="item.show"
          :name="item.id"
          style="margin: 0 8px;"
          v-bind="item"
        >
          {{ item.text }}
        </a-button>
        <a-tooltip placement="top" title="复制">
          <a-button
            class=""
            key="copy"
            icon="copy"
            type="link"
            size="small"
            class="x-render-table-btn-operate-item"
            @click="copyHandler(item,index)"
          />
        </a-tooltip>
        <a-tooltip placement="top" title="修改">
          <a-button
            key="edit"
            icon="edit"
            type="link"
            size="small"
            class="x-render-table-btn-operate-item"
            @click="editBtnHandler(item,index)"
          />
        </a-tooltip>
        <a-tooltip placement="top" title="删除">
          <a-button
            key="close-circle"
            icon="close-circle"
            type="link"
            size="small"
            class="x-render-table-btn-operate-item"
            @click="removeBtnHandler(item,index)"
          />
        </a-tooltip>
      </div>
    </template>
  </vue-draggable>
</template>

<script>

export default {
  name: 'XRenderButtonDraggable',
  inject: ['xDesignTable'],
  props: {
    btnJustify: {
      type: String
    }
  },
  computed: {
    draggableOptions: {
      get() {
        return {
          group: 'XRenderBtn',
          sort: true,
          animation: 300,
          draggable: '.x-render-table-btn-group',
          handler: '.x-render-table-btn-group',
          disabled: false
        }
      }
    }
  },
  methods: {
    tableBtnMoveEndHandler({ newIndex }) {
      const { xDesignTable } = this
      xDesignTable.currentBtnIndex = newIndex
    },
    editBtnHandler(btn) {
      const { xDesignTable } = this
      xDesignTable.btnFormShow = true
      xDesignTable.btnFormAdd = false
      const findIndex = xDesignTable.tableBtns.findIndex(item => item.id === btn.id)
      if (findIndex !== -1) {
        xDesignTable.currentBtnIndex = i
      }
    },
    removeBtnHandler(btn) {
      const { xDesignTable } = this
      const confirm = this.$confirm({
        content: `确定要删除按钮 ${btn.name} ${btn.text} 吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk() {
          const findIndex = xDesignTable.tableBtns.findIndex(item => item.id === btn.id)
          if (findIndex !== -1) {
            xDesignTable.tableBtns.splice(index, 1)
          }
          confirm.destroy()
        },
        onCancel() {
          confirm.destroy()
        }
      })
    }
  }
}
</script>

<style scoped lang="css">
.x-render-drag-btn-container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: 8px 0;
  padding: 8px;
  border: 1px dashed #cccccc;
}

.x-render-table-btn-group {
  display: grid;
  grid-template-columns: 70px;
  place-items: center;
  margin: 0 4px;
  padding: 4px;
  border: 1px dashed #fff;
}

.x-render-table-btn-group:focus, .x-render-table-btn-group:hover {
  grid-template-columns: auto 30px 30px 30px;
  border: 1px dashed #f44;
}

.x-render-table-btn-operate-item {
  display: none;
}

.x-render-table-btn-group:focus .x-render-table-btn-operate-item, .x-render-table-btn-group:hover .x-render-table-btn-operate-item {
  display: block;
  color: #f44;
}
</style>
